<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<!DOCTYPE html>
<html>
<head>
	<title>用户注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
</head>
<body>
<!-- <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> -->

<script>

    jQuery.validator.addMethod("isPhone", function(value, element) {  

        var tel = /^[0-9]{6}$/;

        return this.optional(element) || (tel.test(value));

    }, "请正确填写您的6位手机号码");

   

    $().ready(function() {

        // 在键盘按下并释放及提交后验证提交表单

          $("#registerform").validate({

            rules: {

              username: {

                required: true,

                minlength: 2

              },

              password: {

                required: true,

                minlength: 5

              },

              confirm_password: {

                required: true,

                minlength: 5,

                equalTo: "#password"

              },

              email: {

                required: true,

                email: true

              },

              phone: {

                required: true,

                isPhone: true

              }

            },

            messages: {

              username: {

                required: "请输入用户名",

                minlength: "用户名必需由两个字符组成"

              },

              password: {

                required: "请输入密码",

                minlength: "密码长度不能小于 5 个字符"

              },

              confirm_password: {

                required: "请输入密码",

                minlength: "密码长度不能小于 5 个字符",

                equalTo: "两次密码输入不一致"

              },

              email: "请输入一个正确的邮箱",

              phone: "请输入一个正确的手机号码"

             }

            })

        });

</script>


	<!--header-->
	<jsp:include page="/header.jsp">
		<jsp:param name="flag" value="10"></jsp:param>
	</jsp:include>
	<!--//header-->


	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<c:if test="${!empty msg }">
					<div class="alert alert-danger">${msg }</div>
				</c:if>
				<form action="/user_rigister" method="post" id="registerform">
					<div class="register-top-grid">
						<h3>注册新用户</h3>
						<div class="input">
							<span>用户名 <label style="color:red;">*</label></span>
							<input type="text" name="username" placeholder="请输入用户名" required="required">
						</div>
						<div class="input">
							<span>邮箱 <label style="color:red;">*</label></span>
							<input type="text" name="email" placeholder="请输入邮箱" required="required">
						</div>
						<div class="input">
							<span>密码 <label style="color:red;">*</label></span>
							<input type="password" name="password" placeholder="请输入密码" required="required">
						</div>
						<div class="input">
							<span>收货人<label></label></span>
							<input type="text" name="name" placeholder="请输入收货">
						</div>
						<div class="input">
							<span>收货电话<label></label></span>
							<input type="text" name="phone" placeholder="请输入收货电话">
						</div>
						<div class="input">
							<span>收货地址<label></label></span>
							<input type="text" name="address" placeholder="请输入收货地址">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="register-but text-center">
					   <input type="submit" value="提交">
					   <div class="clearfix"> </div>
					</div>
				</form>
				<div class="clearfix"> </div>
			</div>
	    </div>
	</div>
	<!--//account-->

	




	<!--footer-->
	<jsp:include page="/footer.jsp"></jsp:include>
	<!--//footer-->

	
</body>
</html>